<template>
  <div id="demo">
    <h1>This is a Carousel page Demo Test</h1>


    <Row>
      <Col span="18" class="yang">
      <Carousel v-model="value1" autoplay loop>
        <CarouselItem v-for="(item) in loopPics" :key="index">
          <img :src="item.picture">
        </CarouselItem>
      </Carousel>
      </Col>
      <Col span="6" class="yang">
      col-2
      </Col>
    </Row>


  </div>


</template>

<script type="text/ecmascript-6">
  export default{
    data(){
      return {
        value1: 0,
        loopPics: [
          {
            id: "1",
            picture: "https://bpic.588ku.com/element_banner/20/18/02/6214ef27308433f7465a5f0ff56efad8.jpg"
          },
          {
            id: "3",
            picture: "https://bpic.588ku.com/element_banner/20/18/02/057326d2cbfedfea1ce8826ade029cc8.png"
          }
        ]
      }
    }
  }

</script>
<style>
  #demo {
    text-align: center;
  }

  .yang {
    text-align: center;
    padding: 10px;
  }

</style>
